

header .heading{
    background-color: #1a1c22 !important;
}

main .lft{
    width: 320px;
    font-size: 16px;
}
main .lft .info{
    padding: 24px 32px;
    font-weight: bold;
    color: #fff;
    background-image: url('../img/common/avt-bg1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 2;
    position: relative;
}
main .avt{
    overflow: hidden;
    
}
main .lft .info .avt{
    width: 50px;
    border: 1px solid rgba(255, 255, 255, 0.49);
    margin-right: 8px;
}
main .lft .info .name{
    max-width: 196px;
}
main .lft .info::after{
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 36px;
    z-index: -1;
    background-image: linear-gradient(rgba(26, 28, 34, 0) 0%, rgba(26, 28, 34, 0.06) 6%, rgba(26, 28, 34, 0.12) 12%, rgba(26, 28, 34, 0.19) 19%, rgba(26, 28, 34, 0.26) 26%, rgba(26, 28, 34, 0.34) 34%, rgba(26, 28, 34, 0.42) 42%, rgba(26, 28, 34, 0.5) 50%, rgba(26, 28, 34, 0.58) 58%, rgba(26, 28, 34, 0.66) 66%, rgba(26, 28, 34, 0.74) 74%, rgba(26, 28, 34, 0.81) 81%, rgba(26, 28, 34, 0.88) 88%, rgba(26, 28, 34, 0.94) 94%, rgb(26, 28, 34) 100%);
}
main .lft .join-vip{
    width: 256px;
    line-height: 44px;
    background: rgb(242, 191, 131);
    border-radius: 4px;
    font-size: 16px;
    color: rgb(17, 19, 25);
    text-align: center;
    font-weight: bold;
    margin: 16px auto;
    padding: 0px 12px;
}
main .lft .join-vip:hover{
    background: rgb(244, 203, 155);
}
main .lft .menu{
    padding: 0 32px;
}
main .lft .menu a{
    height: 56px;
    line-height: 1;
    box-sizing: content-box;
}
main .lft .menu a:first-child{
    border-bottom: rgba(255, 255, 255, 0.15) 1px solid;
    margin-bottom: 16px;
}
main .lft .menu a:last-child{
    border-top: rgba(255, 255, 255, 0.15) 1px solid;
    padding-top: 9px;
    margin-top: 7px;
}
main .lft .menu a .icon{
    width: 15px;
    position: relative;
    margin-right: 13px;
}
main .lft .menu a .t{
    color:#fff;
}
main .lft .menu a:hover .t,
main .lft .menu a.active .t{
    color: #03b74d;
}
main .lft .menu a.active .icon img{
    opacity: 0;
}
main .lft .menu a.active .icon img:last-child{
    opacity: 1;
}

main .rht{
    flex: 1;
    padding-top: 40px;
}
main .rht .ttl{
    text-align: center;
    font-size: 30px;
    line-height: 41px;
    color: #fff;
}
main .rht .palace{
    max-width: 1073px;
    margin: 0px auto;
}
main .rht.set .palace{
    max-width: initial;
    margin: 40px 0;
    width: 896px;
    min-height: 829px;
}
main .rht.set .palace .blk + .blk{
    margin-top: 32px;
}
main .rht.set .palace .blk .subTtl{
    font-size: 16px;
    line-height: 19px;
    color: rgb(130, 131, 135);
    margin-bottom: 12px;
}
main .rht.set .palace .blk .subTtl + *{
    background: rgb(26, 28, 34);
    border-radius: 6px;
    padding: 24px 32px;
}
main .rht.set .palace .blk .avt{
    width: 72px;
    border: 1px solid rgb(45, 47, 52);
    margin-right: 32px;
}
main .rht.set .palace .blk.info .txt{
    flex: 1;
    padding-right: 32px;
    position: relative;
    height: 70px;
    color: rgb(236, 236, 236);
}
main .rht.set .palace .blk.info .txt .name,
main .rht.set .palace .blk.info .txt .dtls{
    flex: 1;
}
main .rht.set .palace .blk.info .name{
    font-size: 18px;
    margin-bottom: 4px;
    font-weight: bold;
}
main .rht.set .palace .blk.info .txt .dtls{
    font-size: 14px;
}
main .rht.set .palace .blk.info .txt .dtls span{
    color: rgb(130, 131, 135);
    display: inline-block;
    margin-right: 3px;
}
main .rht.set .palace .blk.info .txt .dtls p{
    position: relative;
}
main .rht.set .palace .blk.info .txt .dtls p + p{
    margin-left: 48px;
}
main .rht.set .palace .blk.info .txt .dtls p + p::before{
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
}
main .rht.set .palace .blk .btn{
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    right: 0;
}
main .rht.set .palace .blk.vip .box{
    position: relative;
    z-index: 2;
    background-image: linear-gradient(134deg, rgb(255, 222, 173) 0%, rgb(230, 176, 115) 100%);
}
main .rht.set .palace .blk.vip .box .txt{
    font-size: 14px;
    line-height: 16px;
    flex: 1;
    color: rgb(17, 19, 25);
    padding-right: 10px;
}
main .rht.set .palace .blk.vip .box .txt p:first-child{
    font-size: 24px;
    line-height: 29px;
    color: rgb(17, 19, 25);
    font-weight: bold;
    margin-bottom: 12px;
}
main .rht.set .palace .blk.vip .box .join{
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    font-size: 15px;
    color: rgb(17, 19, 25);
    line-height: 44px;
    padding: 0px 24px;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    position: relative;
}
main .rht.set .palace .blk.vip .box .join::before{
    pointer-events: none;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
}
main .rht.set .palace .blk.vip .box .join:hover::before{
    opacity: 1;
}
main .rht.set .palace .blk.vip .box .v{
    z-index: -1;
    left: auto;
    right: 0;
    width: 97px;
}
main .rht.set .palace .blk.account .box{
    padding: 0 32px;
}
main .rht.set .palace .blk.account .box .item{
    padding: 24px 0;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    position: relative;
}
main .rht.set .palace .blk.account .box .item + .item{
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
main .rht.set .palace .blk.account .box .item .lbl{
    margin-right: 12px;
    opacity: 0.87;
    color: rgb(130, 131, 135);
}

main .rht .palace .btn-box{
    justify-content: flex-end;
}
main .rht .palace .btn-box{
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255,.1);
}
main .rht .palace .btn-box p{
    font-size: 16px;
    width: 96px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    margin-left: 16px;
    cursor: pointer;
}
main .rht .palace .btn-box p.disabled{
    opacity: .3;
}
main .rht .palace .btn-box .cancel{
    position: relative;
    color: #1cc749;
}
main .rht .palace .btn-box .cancel:hover{
    color: #03b74d;
}

main .rht .palace .btn-box .cancel::before{
    box-sizing: border-box;   
    border: 1px solid #1cc749;
    border-radius: 4px;
}
main .rht .palace .btn-box .cancel:hover::before{
    border-color: #03b74d;
}
main .rht .palace .filter-box{
    font-size: 16px;
    height: 54px;
    color: #fff;
    position: relative;
}
main .rht .palace .filter-box .turn{
    width: 23px;
    height: 10px;
    background: rgb(126, 127, 130);
    border-radius: 16px;
    position: relative;
    margin-right: 8px;
    
}
main .rht .palace .listEditting .filter-box .turn{
    opacity: .5;
    cursor: not-allowed;
}
main .rht .palace .filter-box .turn.active{
    background-color: rgba(28, 199, 73, 0.5);
}
main .rht .palace .filter-box .turn .circle{
    width: 16px;
    background: rgb(236, 236, 236);
    /* position: absolute; */
    left: -3px;
}
main .rht .palace .filter-box .turn.active .circle{
    left: auto;
    right: -3px;
    background: #03b74d;
}
main .rht .palace .chsAll{
    right: 0px;
    color: #fff;
}

main .rht.collect .palace .chsAll{
    top: 19px;
    position: absolute;
}
main .rht .palace .chsAll .circle,
main .rht .palace .list .item .cover .shadow .circle{
    width: 14px;
    box-sizing: content-box;
    border: 2px solid rgb(153, 153, 153);
    margin-right: 8px;
}
main .rht .palace .chsAll.active .circle,
main .rht .palace  .list .item.active .cover .shadow .circle{
    background: #03b74d;
    border-color: #03b74d;
}
main .rht .palace .circle img{
    width: 70%;
    opacity: 0;
}
main .rht .palace .chsAll.active .circle img,
main .rht .palace  .list .item.active .cover .shadow .circle img{
    opacity: 1;
}

main .rht .palace .list-box{
    position: relative;
}
main .rht .palace .list{
    min-height: 500px;
}
main .rht .palace .list{
    margin-left: -20px;
}
main .rht.collect .palace .list{
    padding-top: 24px;
    transition: padding .3s;
}
main .rht.collect .palace .listEditting .list{
    padding-top: 54px;
}
main .rht .palace .list .item{
    width: calc(25% - 20px);
    margin-left: 20px;
    margin-bottom: 40px;
    transition: transform .3s;
    position: relative;
}
main .rht .palace .list .item .cover{
    border-radius: 4px;
    overflow: hidden;
}
main .rht .palace .list .item .cover .shadow .circle{
    width: 22px;
    position: absolute;
    right: 10px;
    top: 10px;
    border-color: #ddd;
    margin-right: 0;
}
main .rht .palace .list .item .cover .shadow{
    background: rgba(34, 34, 34,0.5);
    z-index: 6;
}
main .rht .palace .list .item .cover::before{
    padding-bottom: 56.25%;
}
main .rht .palace .list .item .cover .play-btn{
    width: 40px;
    display: none;
}
main .rht.history .palace .list .item .cover .play-btn{
    position: absolute;
    z-index: 3;
    bottom: 12px;
    right: 12px;
}
main .rht .palace .list .item:hover .cover .play-btn{
    display: block;
}
main .rht .palace .listEditting .list .item .cover .play-btn{
    display: none;
}
main .rht .palace .list .item .cover .to{
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 6%, rgba(0, 0, 0, 0.09) 12%, rgba(0, 0, 0, 0.13) 19%, rgba(0, 0, 0, 0.18) 26%, rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.29) 42%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.41) 58%, rgba(0, 0, 0, 0.46) 66%, rgba(0, 0, 0, 0.51) 74%, rgba(0, 0, 0, 0.57) 81%, rgba(0, 0, 0, 0.62) 88%, rgba(0, 0, 0, 0.66) 94%, rgba(0, 0, 0, 0.7) 100%);
    height: 36px;
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 4px;
}
main .rht .palace .list .item .cover .to p{
    position: absolute;
    right: 0px;
    left: 10px;
    bottom: 10px;
    font-size: 12px;
    color: rgb(255, 255, 255);
}
main .rht .palace .list .item .cover .progress{
    width: 100%;
    position: absolute;
    height: 4px;
    bottom: 0;
    left: 0;
    background: rgb(102, 102, 102);
}
main .rht .palace .list .item .cover .progress .per{
    height: 100%;
    background: #03b74d;
}

main .rht .palace .list .item{
    font-size: 14px;
    color: #fff;
}
main .rht .palace .list .item .name{
    margin: 10px 0px 4px;
    opacity: .8;
}
main .rht .palace .list .item .no{
    opacity: .6;
}
/* main .rht .palace .list .item:hover .name{
    color: #03b74d;
    opacity: 1;
} */


@media(max-width:1679px){
    main .lft{
        font-size: 14px;
        width: 224px;
    }
    main .lft .info{
        padding: 22px 28px;
    }
    main .lft .info .name{
        max-width: 128px;
    }
    main .lft .join-vip{
        width: 176px;
        line-height: 36px;
        margin: 12px auto;
        font-size: 14px;
    }
    main .lft .menu a .icon{
        display: none;
    }

    main .rht{
        padding-top: 32px;
    }
    main .rht.set .palace{
        width: 100%;
        padding: 0 64px;
        margin-top: 32px;
    }
    main .rht.set .palace .blk .subTtl {
        font-size: 14px;
        line-height: 16px;
    }
    main .rht.set .palace .blk .avt{
        width: 62px;
        margin-right: 24px;
    }
    main .rht.set .palace .blk .subTtl + *{
        padding: 24px;
    }
    main .rht.set .palace .blk.info .txt{
        height: 60px;
    }
    main .rht.set .palace .blk.vip .box .txt p:first-child{
        font-size: 18px;
        line-height: 21px;
    }
    main .rht.set .palace .blk.vip .box .join{
        font-size: 14px;
        padding: 0 12px;
        line-height: 36px;
    }
    main .rht.set .palace .blk.vip .box .v{
        width: 93px;
    }
    main .rht.set .palace .blk.account .box{
        padding: 0 24px;
    }
    main .rht.history .palace,
    main .rht.collect .palace{
        padding: 0px 64px;
    }
    main .rht .palace .list .item .cover .play-btn{
        width: 32px;
    }
    main .rht .palace .list .item .cover .shadow .circle{
        width: 20px;
    }
}

@media(max-width:1279px){
    main .rht .palace .list{
        margin-left: 0px;
    }
    
    main .rht .palace .list .item{
        width: 32%;
        margin-left: 2%;
    }
    main .rht .palace .list .item:nth-child(3n - 2){
        margin-left: 0;
    }
}

@media(max-width:1023px){
    main .lft{
        display: none;
    }
    
    main .rht{
        padding-top: 24px;
    }
    main .rht.set .palace{
        padding: 0 50px;
    }
    main .rht .palace .btn-box{
        padding-top: 16px;
    }
    main .rht .palace .btn-box p {
        font-size: 14px;
        width: 88px;
        line-height: 32px;
    }
    main .rht .palace .list .item{
        width: 32%;
        margin-left: 2%;
    }
    main .rht .palace .list .item:nth-child(3n - 2){
        margin-left: 0;
    }
}
@media(max-width:767px){
    
    main .rht{
        padding-top: 20px;
    }
    main .rht.history .palace, 
    main .rht.collect .palace{
        padding: 0 15px;
    }
    main .rht .ttl{
        font-size: 20px;
    }
    main .rht.set .palace{
        padding: 0 15px;
        min-height: initial;
        margin: 20px 0 30px;
    }
    main .rht.set .palace .blk .subTtl + *{
        padding: 20px 15px;
    }
    main .rht.set .palace .blk .avt{
        width: 46px;
        margin-right: 12px;
    }
    main .rht.set .palace .blk.info .name{
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 12px;
    }
    main .rht.set .palace .blk.info .txt{
        height: initial;
    }
    main .rht.set .palace .blk.info .txt .dtls{
        display: block;
        font-size: 12px;
        line-height: 15px;
    }
    main .rht.set .palace .blk.info .txt .dtls p + p{
        margin-left: 0px;
        margin-top: 8px;
    }
    main .rht.set .palace .blk.info .txt .dtls p::before{
        display: none;
    }
    main .rht.set .palace .blk.vip .box{
        padding-bottom: 15px;
        display: block;
    }
    main .rht.set .palace .blk.vip .box .txt{
        font-size: 13px;
    }
    main .rht.set .palace .blk.vip .box .txt p:first-child {
        font-size: 24px;
        line-height: 29px
    }
    main .rht.set .palace .blk.vip .box .join{
        line-height: 44px;
        margin-top: 24px;
        font-size: 16px;
    }
    main .rht.set .palace .blk.account .box{
        padding: 0 15px;
    }
    main .rht.set .palace .blk.account .box .item{
        font-size: 12px;
        display: block;
        padding: 20px 0;
        line-height: 15px;
    }
    main .rht.set .palace .blk.account .box .item .lbl{
        margin-bottom: 12px;
    }
    main .rht .palace .btn-box{
        padding-top: 24px;
    }
    main .rht .palace .btn-box p {
        width: 72px;
        line-height: 30px;
    }
    main .rht .palace .list{
        min-height: 400px;
    }
    main .rht.collect .palace .list{
        padding-top: 16px;
    }
    main .rht.collect .palace .listEditting .list{
        padding-top: 34px;
    }
    main .rht.collect .palace .list .item{
        width: 100%;
        margin-left: 0px !important;
        display: flex;
        align-items: center;
    }
    main .rht .palace .list .item{
        font-size: 12px;
        margin-bottom: 20px;
    }
    main .rht.collect .palace .list .item .cover{
        width: 99px;
        margin-right: 10px;
    }
    main .rht.collect .palace .list .item .txt{
        flex: 1;
    }
    main .rht.collect .palace .list .item .name{
        opacity: .87;
        margin-bottom: 8px;
    }
    main .rht.collect .palace .list .item .cover .play-btn{
        width: 24px;
    }
    main .rht.collect .palace .list .item .cover .shadow .circle{
        width: 14px;
        top: 3px;
        right: 3px;
    }

    main .rht .palace .filter-box{
        height: 52px;
    }
    main .rht .palace .filter-box .turn{
        width: 35px;
        height: 16px;
    }
    main .rht .palace .filter-box .turn.active .circle{
        width: 20px;
    }
     main .rht.history .palace .list{
        margin-left: -7px;
    }
    main .rht.history .palace .list .item{
        width: calc(50% - 7px);
        margin-left: 7px !important;
    }
}

